<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/public.css">
</head>

<body class="bg">
	<div class="header-top-sp">
		<div class="content" style="position: absolute;left: 20px;">
			<img src="../../static/icon.png" class="icon loginindex">
		</div>
		<div class="title-box" style="justify-content: center;">
			<div>
				<span>1.选择时间</span>
				<i class="iconfont icon-xiangyou1 size-setting"></i>
			</div>
			<div>
				<span>2.付款</span>
				<i class="iconfont icon-xiangyou1 size-setting"></i>
			</div>
			<div>
				<span>3.准备上课</span>
				<i class="iconfont icon-xiangyou1 size-setting"></i>
			</div>
		</div>
	</div>
	<div class="main">
		<div class="flex-main">
			<div class="line">
				<div class="avtor"></div>
				<h1 class="teachname"></h1>
				<svg t="1637387213334" class="icon size-16" style="margin-left: 5px;" viewBox="0 0 1024 1024"
					version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6062" width="200" height="200">
					<path
						d="M511.999573 1024c-12.629333 0-24.661333-4.437333-50.944-14.336-111.445333-42.24-205.482667-110.421333-271.616-197.632A503.466667 503.466667 0 0 1 85.332907 504.832V168.277333L511.999573 0l426.666667 168.277333v336.554667a503.466667 503.466667 0 0 1-104.106667 307.2c-66.133333 87.210667-160.170667 155.562667-271.616 197.632C536.74624 1019.562667 524.628907 1024 511.999573 1024zM294.82624 530.602667L455.423573 690.346667l317.013334-315.477334-55.893334-55.466666-261.12 259.669333-104.704-104.106667-55.893333 55.466667z"
						fill="#4FD367" p-id="6063"></path>
					<path
						d="M511.999573 2.304L936.532907 169.813333V505.173333c0 110.762667-35.84 216.746667-103.594667 305.92-66.048 86.784-159.402667 154.88-270.506667 196.949334-26.112 9.898667-38.058667 14.165333-50.432 14.165333-12.373333 0-24.32-4.437333-50.346666-14.165333-110.933333-41.898667-204.544-109.994667-270.506667-196.949334A502.357333 502.357333 0 0 1 87.380907 505.088V169.642667L511.999573 2.389333z m-56.405333 574.976l-102.997333-102.4-1.450667-1.450667-1.536 1.450667-54.272 54.016-1.450667 1.450667 1.450667 1.450666 158.72 158.037334 1.536 1.450666 1.536-1.450666 314.709333-313.173334 1.450667-1.365333-1.450667-1.536-54.272-54.101333-1.536-1.536-1.450666 1.536-258.986667 257.706666zM511.999573 0L85.332907 168.362667v336.469333c0 230.485333 152.149333 420.352 375.466666 504.832 25.173333 9.472 38.144 14.336 51.2 14.336 13.056 0 25.856-4.864 51.2-14.336 223.146667-84.48 375.466667-274.346667 375.466667-504.832V168.362667L511.999573 0z m-56.405333 580.266667l260.437333-259.157334 54.272 53.930667-314.709333 313.344-158.72-158.037333 54.272-53.930667L455.59424 580.266667z"
						fill="#4FD367" p-id="6064"></path>
				</svg>
			</div>
			<div class="line-two">
				<div class="first-text-one">
					<span>第1节课日期</span>
					<span>时间</span>
				</div>
				<div class="first-text-center">
					<span id="dates"></span>
					<span id="times"></span>
				</div>
			</div>
			<div class="line-two">
				<div class="first-text">
					<span style="justify-content: flex-start;">服务内容</span>
				</div>
				<div class="first-text">
					<span style="font-size: 12px;"></span>
					<span style="justify-content: center;">50分钟</span>
					<span id="price"></span>
				</div>
				<div class="first-text">
					<span style="font-size: 12px;">课时</span>
					<span style="justify-content: center;">1</span>
					<span></span>
				</div>
				<div class="first-text">
					<!-- <span style="font-size: 12px;color: #3CB64C;font-weight: bold;">优惠</span>
					<span style="color: #3CB64C;font-weight: bold;">($20.90)</span> -->
				</div>
				<!-- <div class="first-text">
					<span style="font-size: 12px;font-weight: bold;">开始前12个
						小时变更取消</span>
					<span style="font-weight: bold;">0.00</span>
				</div> -->
				<!-- <div class="first-text">
					<span style="font-size: 12px;font-weight: bold;">有效期</span>
					<span style="font-weight: bold;">8个月</span>
				</div> -->
				<div class="first-text tops">
					<span class="total">合计</span>
					<span class="total" id="total">$10.59</span>
				</div>

				<div class="first-text-bank">
					<span class="wrap-size" style="text-align: left;">
						卡号
					</span>
					<p class="wrap-size" style="text-align: right;" id="isbank"></p>
				</div>
				<!-- 	<div class="btm">
						<div class="ipts">
								<div class="select-custom">
									<div style="margin-left: 15px;display: flex;align-items: center;">
										<img src="../../static/pay/Icon_Payment_%20Visa.png" alt="Icon_Payment_.jpg" class="img-wh">
										<strong class="nr" id="content">PERSONAL*** 192</strong>
									</div>
										<i class="iconfont icon-xiang-zuo ic-select" id="ele"></i>
								</div>
						</div>
						<div class="boxs">
							<div class="items" id="first">
									 <strong class="items-btm">1</strong>
									 <strong class="items-btm">2</strong>
									 <strong class="items-btm">3</strong>
									 <strong class="items-btm">4</strong>
							</div>
						</div>
					</div> -->
				<!-- 	<div class="rechange">
						<div class="rachange-items">
							<input type="checkbox" name="" id="" value=""/>
							<span>自动充值，添加课程</span>
						</div>
						<div class="rachange-items">
							<input type="checkbox" name="" id="" value="" />
							<span>当课程快上完时，自动充值，添加课程</span>
						</div>
					</div> -->
				<button type="button" class="btn" id="open">确认付款</button>
				<p class="text-btm">确认付款就等于同意我们的<a href="" class="link-a">refund policy</a></p>
			</div>
			<div class="box-footer" style="justify-content: flex-start;">
				<i class="iconfont icon-dunpai_shield_bg size-29"></i>
				<div class="text-div">
					<span class="title-text">保证100%的满意</span>
					<p>如果老师没有出现，我们将为您免费更换新老师，或
						为您全额退款。</p>
				</div>
			</div>
		</div>
	</div>
	<div class="last-footer">
		<ul>
			<li>2021 Aichi,Inc.</li>
			<li>用户条款</li>
			<li>支付退款政策</li>
			<li>隐私条款</li>
			<li>cookie条款</li>
		</ul>
	</div>
	<div class="mubu">
		<!-- pop弹出窗 -->
		<div class="showpop">
			<div class="box-1">
				<div class="title-box-pop">
					<svg t="1636116769731" style="width: 48px;height: 56px;" viewBox="0 0 1024 1024" version="1.1"
						xmlns="http://www.w3.org/2000/svg" p-id="3998" width="200" height="200">
						<path
							d="M570.6 844.3L512 883.9l-58.6-39.6C288.1 732.4 190 551.8 190 359.3V247.7l322-123.2 322 123.2v111.5c0 192.6-98.2 373.2-263.4 485.1z"
							fill="#31BC69" p-id="3999"></path>
						<path
							d="M476.2 586.4c-8 0-15.6-3.2-21.2-8.8l-110-110c-11.7-11.7-11.7-30.7 0-42.4s30.7-11.7 42.4 0l88.8 88.8 183.7-183.7c11.7-11.7 30.7-11.7 42.4 0s11.7 30.7 0 42.4L497.4 577.6c-5.6 5.7-13.2 8.8-21.2 8.8z"
							fill="#FFFFFF" p-id="4000"></path>
					</svg>
				</div>
				<div class="line-second">
					<span class="decription-pop">完成付款以约课</span>
					<p id="close">×</p>
				</div>
				<div class="pop-ipt">
					<input type="text" name="" id="" value="" placeholder="使用信用卡付款" />
					<img src="../../static/pay/Icon_Payment_%20Visa.png" alt="Icon_Payment_%20Visa.png">
					<img src="../../static/pay/master.png" alt="master.png">
					<img src="../../static/pay/card-amex.png" alt="card-amex.png">
					<img src="../../static/pay/jcb.png" alt="jcb.png">
					<img src="../../static/pay/discover.png" alt="discover.png">
				</div>
				<div class="input-group">
					<span>卡号</span>
					<div class="pop-ipt-second">
						<input type="text" name="" id="username" value="4242424242424242" autocomplete="off"
							placeholder="1234123412341234" />
					</div>
				</div>
				<div class="input-group-three">
					<div>
						<span>有效期</span>
						<div class="pop-ipt-second">
							<input type="text" name="" autocomplete="off" id="time" maxlength="10" value="2022/7"
								placeholder="YYYY/MM,例如2021/11" />
						</div>
					</div>
					<div>
						<span>CVV</span>
						<div class="pop-ipt-second">
							<input type="password" name="" id="cvv" autocomplete="off" value="314"
								placeholder="*****" />
						</div>
					</div>
				</div>
				<div class="section">
					<div class="section-items">
						<!-- <input type="checkbox" name="" id="isok" value="" />
						<span>保存卡下次更方便</span> -->
					</div>
					<!-- 	<div class="section-items">
							<input type="checkbox" name="" id="" value="" />
							<span>跟这个老师自动续课，事先保证每周都有课上</span>
						</div> -->
				</div>
				<button type="button" class="btn" id="conform-btn">确认支付 $22.30</button>
				<p class="text-btm">确认付款就等于同意我们的<a href="" class="link-a">refund policy</a></p>
			</div>
			<div class="box-box-footer">
				<i class="iconfont icon-suozhu1 set-i"></i>
				<span> Payment details are encrypted and securely processed
					by our provider - Stripe. We do not store or collect
					personal data from payment transactions.
				</span>
			</div>
		</div>
	</div>
</body>

</html>
<style type="text/css">
	.ipts {
		/* padding-left: 16px; */
		width: 100%;
		display: flex;
		width: 100%;
		align-items: center;
	}

	.items {
		width: 100%;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		border: 1px solid #d5d5d5;
		box-shadow: #f1e8e8 0px 0px 3px 3px;
	}

	.nr {
		margin-left: 15px;
		width: 100%;
		padding: 8px 0;
		color: #3C3C3C;
	}

	.items-btm {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 8px 0;
		/* border-radius: 6px; */
		width: 90%;
		margin: auto;
		color: #3C3C3C;
		cursor: pointer;
		border-bottom: 1px solid #e5e5e5;
	}

	.items:last-child {
		border: transparent;
	}

	.select-custom {
		flex: 1;
		border: 1px solid #7DB0ED;
		border-radius: 6px;
		display: flex;
		align-items: center;
		position: relative;
	}

	.ic-select {
		display: flex;
		justify-content: center;
		margin-left: 9px;
		font-size: 30px;
		color: #BDBDBD;
		transform: rotate(270deg) scale(0.6);
		position: absolute;
		right: 0px;
		transition: transform 0.5s ease-in;
	}

	.ic-select-active {
		display: flex;
		justify-content: center;
		margin-left: 9px;
		font-size: 30px;
		color: #BDBDBD;
		transform: rotate(450deg) scale(0.6);
		position: absolute;
		right: 0px;
		transition: transform 0.5s ease-in;
	}
</style>
<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="/js/agora-rtm-sdk-1.4.3.js"></script>
<script src="../../js/dream-msg.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	// login 方法参数
	let options = {
		token: localStorage.getItem('rtmToken'),
		uid: JSON.parse(localStorage.getItem('user')).user_id
	}

	async function loginRTM() {

		// 你的 app ID
		const appID = "69ee1d0f77224d1897d21a1d3bc56cd4"

		// 初始化客户端
		const client = AgoraRTM.createInstance(appID)

		// 显示连接状态变化
		client.on('ConnectionStateChanged', function (state, reason) {
			console.log("State changed To: " + state + " Reason: " + reason)
		})

		// 登录 RTM 系统
		await client.login(options)

		return client
	}

	let options2 = {
		enableHistoricalMessaging: true,
		enableOfflineMessaging: true
	}

	//选中tabs 
	$('.title-box div').each(function () {
		$(this).click(function () {
			$('.title-box div').each(function () {
				$(this).css('color', '')
			})
			$(this).css({ 'color': '#000000', 'font-weight': 'bold' })
		})
	})
	// 切换
	function change(area, icon) {
		if ($('#' + icon).hasClass('ic-select-active')) {
			$('#' + icon).removeClass('ic-select-active');
			$('#' + icon).addClass('ic-select');
			$('#' + area).slideToggle("slow");
		} else {
			$('#' + icon).removeClass('ic-select');
			$('#' + icon).addClass('ic-select-active');
			$('#' + area).slideToggle("slow");
		}
	}
	// 选择框切换
	$('.ipts').click(function () {
		change('first', 'ele');
	})

	$('.items-btm').each(function () {
		$(this).click(function () {
			$("#content").html($(this).html());
			$('#ele').removeClass('ic-select-active');
			$('#ele').addClass('ic-select');
			$('#first').slideToggle("slow");
		})
	})
	// 打开or关闭弹窗
	function showorhide() {
		$(".mubu").fadeOut(500);
	}

	$("#close")[0].addEventListener("click", showorhide)

	$("#open").click(async function () {

		if (localStorage.getItem('result') && localStorage.getItem('bank')) {
			$(this).attr("disabled", true)
			var closeMsg = Dreamer.loading('支付中,请稍等');
			// 账号参数
			let bank = JSON.parse(localStorage.getItem('bank'));

			// 日期参数
			let results = Array.from(localStorage.getItem('result'));

			// 获取老师的id，时间
			let pdata = JSON.parse(localStorage.getItem('pdata'));

			let params = {
				createtime: getDate(),
				number: bank.username,
				exp_month: localStorage.getItem('result').split(',')[1],
				exp_year: localStorage.getItem('result').split(',')[0],
				state: 1,
				skillname: decodeURI(obj.skill),
				cvc: bank.cvv,
				paymentmethod: "国际信用卡",
				teacherid: pdata.teacherid,
				coursetime: pdata.coursetime,
				timequantum: pdata.timequantum
			}

			let res = await ajax('credit_card', params, 'post');

			if (res.code == 200) {
				let client = await loginRTM()
				let res = await client.sendMessageToPeer(
					{ text: `<div>老师你好 我向你购买了一门课程 请查看</div>` },
					params.teacherid + '',
					options2
				)
				closeMsg();
				window.location.href = `/views/pay/payconform.html?userid=${params.teacherid}&coursetime=${params.coursetime}&timequantum=${params.timequantum}`

			} else {
				closeMsg();
				Dreamer.warning('支付失败,请检查!', 2000)
				$(this).attr("disabled", false)

			}
		} else {
			$(".mubu").fadeIn(500);
		}
	})
	// 打开or关闭弹窗
	let params = window.location.href.split('?')[1].split('&'),
		obj = {}
	params.forEach(item => {
		let key = item.split('=')[0],
			value = item.split('=')[1]
		obj[key] = value
	})

	$('.first-text')[1].children[0].innerHTML = decodeURI(obj.skill);
	// 预加载默认输入
	payload(1, obj);
	$(function () {

		console.log(JSON.parse(localStorage.getItem('bank')));

		// 初始化数据
		$('.title-box div').eq(1).css({ 'color': '#000000', 'font-weight': 'bold' })
		// $('#first').hide();

		// 进入页面判断是否输入银行卡
		// if (localStorage.getItem('bank')) {

		// 	let banks = JSON.parse(localStorage.getItem('bank'));

		// 	$("#isbank").html(banks.username);
		// 	$('.first-text-bank').show();
		// } else {
		// 	$('.first-text-bank').hide();
		// }
	})

	$("#conform-btn").click(async function () {

		if (!$('#username').val()) {

			Dreamer.warning("请输入卡号");

		} else if (!$('#time').val()) {

			Dreamer.warning("请输入有效期");

		} else if (!$('#cvv').val()) {

			Dreamer.warning("请输入cvv");
		} else {

			// if ($('#isok').prop('checked')) {

			// 	let bankgroups = {
			// 		username: $('#username').val(),
			// 		time: $('#time').val(),
			// 		cvv: $('#cvv').val(),
			// 	}
			// 	localStorage.setItem('bank', JSON.stringify(bankgroups))
			// } else {
			// 	localStorage.reomveItem('bank')
			// }


			let vals = $('#time').val()

			let arr = Array.from(vals);

			let ishas = arr.includes('/');

			let closeMsg;
			if (ishas) {
				let result = vals.split('/');

				// 设置账号
				localStorage.setItem('result', result.toString());


				// 获取老师的id，时间
				let pdata = JSON.parse(localStorage.getItem('pdata'));

				let params = {
					createtime: getDate(),
					number: $('#username').val(),
					exp_month: result[1],
					exp_year: result[0],
					state: 1,
					skillname: decodeURI(obj.skill),
					cvv: $('#cvv').val(),
					createtime: getDate(),
					paymentmethod: "国际信用卡",
					teacherid: pdata.teacherid,
					coursetime: pdata.coursetime,
					timequantum: pdata.timequantum
				}
				closeMsg = Dreamer.loading("支付中,请稍等");
				$("#close")[0].removeEventListener('click', showorhide)
				$(this).attr("disabled", true)
				let res = await ajax('credit_card', params, 'post');

				if (res.code == 200) {
					closeMsg();
					let client = await loginRTM()
					let res = await client.sendMessageToPeer(
						{ text: `<div>老师你好 我向你购买了一门课程 请查看</div>` },
						params.teacherid + '',
						options2
					)
					window.location.href = `/views/pay/payconform.html?userid=${params.teacherid}&coursetime=${params.coursetime}&timequantum=${params.timequantum}`

				} else {
					closeMsg();
					Dreamer.warning('支付失败,请检查!', 2000);
					$("#close")[0].addEventListener("click", showorhide)
					$(this).attr("disabled", false)
				}
			} else {
				Dreamer.warning('有效期格式不正确！', 2000);
			}

		}
	})




	// 默认关闭弹窗 
	$(function () {
		$('.mubu').hide();
	})

</script>
<style type="text/css">
	.boxs {
		margin-top: 10px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.header-top-sp {
		height: 56px;
		width: 100%;
		padding: 6px 1%;
		box-sizing: border-box;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.bg {
		background-color: rgba(237, 239, 240, 1);
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.title-box {
		display: flex;
		align-items: center;
		width: auto;
		color: #7aa5bb;
		font-size: 12px;
		z-index: 10;
		cursor: pointer;
	}

	.title-box div:not(:first-child) {
		padding: 0 5px;
	}

	.size-setting {
		transform: rotate(360deg);
		font-size: 12px;
		font-weight: bold;
		cursor: pointer;
	}

	.main {
		margin-top: 20px;
		padding: 8px 20px 10px 20px;
		background-color: #FFFFFF;
		border-radius: 6px;

		box-shadow: rgba(212, 212, 212, 0.5) 0px 0px 10px 0px;
	}

	.avtor {
		width: 46px;
		height: 46px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #89C2DE;
	}

	.flex-main {
		width: 100%;
		display: flex;
		flex-flow: column wrap;
	}

	.size-16 {
		width: 15px;
		height: 15px;
		font-weight: bold;
		cursor: pointer;
	}

	.line {
		width: 100%;
		display: flex;
		align-items: center;
		padding-top: 10px;
		padding-bottom: 15px;
		border-bottom: 1px solid #d3d3d3;
	}

	.line-two {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10px;
		padding-bottom: 15px;
		border-bottom: 1px solid #d3d3d3;
	}

	.line h1 {
		margin-left: 8px;
		color: #3C3C3C;
	}

	.first-text-one {
		width: 100%;
		color: #8F8F8F;
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
	}

	.first-text-one span {
		display: flex;
		font-weight: bold;
	}

	.first-text {
		width: 100%;
		color: #8F8F8F;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
		font-weight: bold;
	}

	.first-text-bank {
		width: 100%;
		color: #8F8F8F;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 4px 0;
		font-weight: bold;
	}

	.first-text span {
		width: 100px;
		display: flex;
	}

	.first-text span:last-child {
		justify-content: flex-end;
	}

	.first-text-center {
		width: 100%;
		color: #3C3C3C;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		font-weight: bold;
	}

	.first-text-else {
		width: 100%;
		color: #8F8F8F;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
	}

	.tops {
		margin-top: 20px;
	}

	.total {
		color: #3C3C3C;
		font-size: 18px;
	}

	.wrap-size {
		display: block;
		width: 45%;
		color: #8d8d8d;
		font-size: 14px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.wrap {
		width: 100%;
		height: 30px;
		border: 1px solid #0056D2;
		border-radius: 6px;
	}

	.wrap-title {
		color: #;
	}

	.btm {
		margin-top: 16px;
		width: 100%;
		font-size: 14px;
		color: #3C3C3C;
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		font-weight: bold;
	}

	.line-three {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding-top: 10px;
		padding-bottom: 12px;
		border-bottom: 1px solid #d3d3d3;
	}

	.line-three>span {
		font-size: 14px;
		color: #3C3C3C;
		font-weight: bold;
	}

	.flex-text {
		display: flex;
		align-items: baseline;
	}

	.size-10 {
		padding-top: 5px;
		font-size: 10px;
		color: #32D600;
	}

	.flex-text span {
		display: block;
		width: 80%;
		color: #32D600;
		font-size: 10px;
	}

	.box-select {
		margin-top: 8px;
		width: 100%;
		box-sizing: border-box;
		padding: 5px 10px 5px 15px;
		border: 1px solid #D8D8D8;
		border-radius: 6px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.box-active {
		border: 1px solid #2073D4;
	}

	.flex-box {
		display: flex;
	}

	.flex-box img {
		padding: 0 2px;
		width: 40px;
		height: 25px;
	}

	.size-25 {
		color: #2073D4;
		font-size: 30px;
	}

	.btn {
		width: 60%;
		padding: 10px 0;
		border: none;
		background-color: #2073D4;
		font-size: 14px;
		border-radius: 6px;
		color: #fff;
		margin: auto;
		margin-top: 18px;
		cursor: pointer;
	}

	.text-btm {
		color: #3C3C3C;
		font-size: 12px;
		font-weight: bold;
		margin-top: 18px;
	}

	.link-a {
		color: #2073D4;
		font-size: 12px;
		margin-left: 5px;
	}

	.box-footer {
		margin-top: 10px;
		display: flex;
		justify-content: flex-start;
	}

	.box-footer span {
		color: #3C3C3C;
		font-size: 10px;
		font-weight: bold;
	}

	.text-div {
		margin-left: 8px;
	}

	.title-text~p {
		width: 240px;
	}

	.box-footer p {
		padding-top: 6px;
		color: #9A9A9A;
		font-size: 10px;
		font-weight: bold;
	}

	.size-29 {
		font-size: 29px;
		color: #32D600;
	}

	.last-footer {
		position: absolute;
		bottom: 0px;
		margin-top: 24px;
		width: 100%;
		padding: 25px 0;
		color: #a2a2a2;
		font-size: 12px;
		border-top: 1px solid #c4c5c6;
		font-weight: bold;
	}

	.last-footer>ul {
		padding: 0 20%;
		display: flex;
		justify-content: space-between;
		cursor: pointer;
	}

	.last-footer>ui li {
		flex: 1;
		justify-content: center;

	}

	.img-icon {
		margin-left: 8px;
		width: 16px;
		height: 13px;
	}

	.rechange {
		margin-top: 10px;
		box-sizing: border-box;
		width: 100%;
		border-radius: 10px;
		padding: 15px 12px;
		color: #3C3C3C;
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-row-gap: 18px;
		font-weight: bold;
		box-shadow: #EDEDED 0px 0px 3px 3px;

	}

	.rachange-items {
		display: flex;
		align-items: center;
		flex-flow: row nowrap;
	}

	.rachange-items input {
		display: inline-block;
		zoom: 120%;
	}

	.rachange-items span {
		margin-left: 5px;
	}

	/* pop */
	.showpop {
		width: 400px;
		background-color: #FFFFFF;
		border-radius: 6px;
		/* padding:  0 25px; */
		display: flex;
		flex-flow: column nowrap;
		align-items: center;
		position: relative;
	}

	.box-1 {
		width: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0px 25px 13px 25px;
	}

	.title-box-pop {
		width: 70px;
		height: 70px;
		border-radius: 50%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -35px;
	}

	.line-second {
		width: 100%;
		margin-top: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.line-second>p {
		position: absolute;
		top: -10px;
		right: 0px;
		font-size: 24px;
		font-weight: bold;
		cursor: pointer;
	}

	.desription-pop {
		color: #3C3C3C;
		font-weight: bold;
		font-size: 14px;
	}

	.mubu {
		width: 100%;
		height: inherit;
		background-color: rgba(237, 239, 240, 0.4);
		position: absolute;
		left: 0px;
		top: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pop-ipt {
		margin-top: 10px;
		box-sizing: border-box;
		width: 100%;
		display: flex;
		padding: 5px 25px 5px 8px;
		border: 1px solid #B4B4B4;
		background: #fff;
		border-radius: 6px;
	}

	.pop-ipt>input {
		width: 98px;
		outline: none;
		border: none;
	}

	::-webkit-input-placeholder {
		/* WebKit, Blink, Edge */
		color: #767676;
		font-size: 12px;
		font-weight: bold;
	}

	.pop-ipt img {
		flex: 1;
		padding: 0 2px;
		width: 40px;
		height: 25px;
	}

	.input-group {
		width: 100%;
		display: flex;
		flex-flow: column wrap;
	}

	.input-group>span {
		padding: 10px 0;
		color: #3C3C3C;
		font-size: 10px;
	}

	.pop-ipt-second {
		box-sizing: border-box;
		width: 100%;
		display: flex;
		flex-flow: column nowrap;
		padding: 5px 25px 5px 8px;
		background: #fff;
		border-radius: 6px;
		background-color: #d0d0d0;
	}

	.pop-ipt-second>input {
		flex: 1;
		outline: none;
		border: none;
		background-color: #d0d0d0;
	}

	.input-group-three {
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
		width: 100%;
		flex-flow: row nowrap;
	}

	.input-group-three>div {
		width: 45%;
	}

	.input-group-three span {
		display: flex;
		padding: 10px 0;
		color: #3C3C3C;
		font-size: 10px;
	}

	.section {
		width: 100%;
		display: flex;
		flex-flow: column;
	}

	.section-items {
		padding: 15px 0 10px 0;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #3C3C3C;
		font-weight: bold;
	}

	.section-items span {
		margin-left: 8px;
	}

	.section-items input {
		zoom: 120%;
	}

	.box-box-footer {
		padding-top: 10px;
		border-top: 1px solid #EDEFF0;
		padding: 13px 25px 13px 25px;
		display: flex;
		align-items: baseline;
		font-size: 12px;
		color: #9A9A9A;
	}

	.set-i {
		color: #9A9A9A;
	}
</style>
<!--  -->